<template>
  <div>
    <el-table :data="tableData" style="width: 100%" :border="true" stripe>
      <el-table-column prop="date">
        <template slot="header">
          <div style="display: flex; justify-content: left;align-items: center;">
            <div>
              日期
            </div>
            <FiterTable :filterType=3 @getValue="getVaue" @cleanValue="cleanValue" />
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="name">
        <template slot="header">
          <div style="display: flex; justify-content: left;align-items: center;">
            <div>
              姓名
            </div>
            <FiterTable :filterType=0 @getValue="getVaue" @cleanValue="cleanValue" />
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="address" :formatter="formatter">
        <template slot="header">
          <div style="display: flex; justify-content: left;align-items: center;">
            <div>
              地址
            </div>
            <FiterTable :filterType=1 @getValue="getVaue" @cleanValue="cleanValue" />
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import FiterTable from '../components/FilterTable.vue'
export default {
  name: 'homeView',
  components: { FiterTable },
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      filterType: 0,
      params: {
        inputValue: '',
        radioVal: '',

      }
    }
  },
  created() {
    this.initPage()
  },
  methods: {
    initPage() {
      this.initTable()
    },
    initTable() {
      //发起ajax请求
    },
    getVaue(val) {
      console.log(`子组件传来的${val}`)
    },
    cleanValue(val) {
      console.log(`子组件传来的${val}`)
    },

    formatter(row) {
      return row.address;
    },
    renderHeader(h, { column }) {
      return h('span', { style: { padding: '0' } },
        [
          h('span', { style: { paddingRight: '3px' } }, column.label),
          h('a', {
            style: { color: '#008AE1', fontSize: '12px' },
            on: { click: () => { this.isDragon = false } },
            props: { content: column.label },
          }, '编辑')
        ]
      )
    },

  }
}
</script>